<template>
  <div>
    <el-dialog
      ref="isPopWindows"
      v-dialogDrag
      :title="'网点日历查看'"
      :visible="popupsVisible"
      width="75%"
      :append-to-body="true"
      :close-on-click-modal="false"
      center
      @close="close"
      @open="open"
    >
      <dialogHeader
        slot="title"
        :title="'网点日历查看'"
        :style-type="$store.state.app.dialogType"
      />
      <div class="title">
        <h2>{{ `${calendarYear}年订货日历` }}</h2>
      </div>
      <div class="box_item1">
        <calendar-by-year
          :key="calendarKey"
          ref="calendar"
          :options="calendarArr"
          class="calendar"
          :determine-year="calendarYear"
          :clickable="false"
          :set-calendar-data="setCalendarData"
          @getCalendarData="getCalendarData"
          @handlePrevYear="handlePrevYear"
          @handleNextYear="handleNextYear"
        />
      </div>
    </el-dialog>
  </div></template>

<script>
import dialogHeader from '@/components/dialogHeader'
import calendarByYear from '@/views/pa/purchasingManagement/orderCalendarSetting/cans/calendarByYear'
export default {
  name: 'CalendarPopups',
  components: {
    calendarByYear,
    dialogHeader
  },
  props: {
    popupsVisible: { type: Boolean, default: false }
  },
  data() {
    return {
      selectData: [],
      setCalendarData: [],
      calendarYear: new Date().getFullYear(),
      calendarKey: `calendarKey${this.$utils.generateId()}`,
      calendarArr: {
        type: 'combination',
        headStyle: { todayBtn: 'right', combination: 'center', checkBtn: 'right' },
        viewStyle: { day: 'center' },
        calendarData: []
      }
    }
  },
  methods: {
    async open() {
      const apiUrl = 'mp/e3sh/spareparts/mallorder/partOrderMakeDlrService/queryCalendar.do'
      const variables = {}
      let response
      try {
        response = await this.$requestAPI({ apiUrl, variables })
      } catch (e) { return }
      if (response.result === '1') {
        this.setCalendarData = this.constructionParameters(response.rows[1]['calendarList'])
      } else {
        this.$message(response.msg || '日历数据请求失败！')
      }
    },
    getCalendarData(data) {
      this.selectData = data
    },
    handlePrevYear(year) {
      this.calendarYear = year
    },
    handleNextYear(year) {
      this.calendarYear = year
    },
    close() {
      this.$emit('update:popups-visible', false)
    },
    constructionParameters(selectDate, year = new Date().getFullYear()) {
      let item = { 'calendarType': '0' }
      for (let i = 1; i < 32; i++) {
        item[`date${i}`] = '0'
      }
      const _item = this.$utils.deepCopy(item)
      return selectDate.reduce((res, arr, idx) => {
        item['yearMonths'] = year + (idx + 1).toString().padStart(2, '0')
        for (let i = 0; i < arr.length; i++) {
          let day = arr[i].split('-')[2]
          if (day.startsWith('0')) {
            day = day.slice(1)
          }
          item[`date` + day] = '1'
        }
        res.push(item)
        item = this.$utils.deepCopy(_item)
        return res
      }, [])
    },
  }
}
</script>

<style lang="css" scoped>
  .box_item1 {
    width: 99%;
    height: 670px;
  }
  .title {
    padding-left: 15px;
    text-shadow: 2px 2px 2px #badee8;
  }
</style>
